import React, { Component } from 'react'
import IceContainer from '@icedesign/container';
import DataBinder from '@icedesign/data-binder';
import { Loading, Select } from '@icedesign/base';
import { generateSunburstChartOption } from '../../../../echarts-figures.js'
// import PermissionControl from '../../../../../../components/PermissionControl/PermissionControl'
import PropTypes from 'prop-types'

var echarts = require('echarts');

@DataBinder({
  ChartData: {
    url: 'https://goldeye.cfbond.com/cattle/similar_company?',
    type: 'get',
    params: {
      // secu_code: this.props.stockCode,
      // Type:'static',
      // tab:
    },
    defaultBindingData: {
      numbers: [],
      layer: 0
    }
  }
})
export default class SunburstChart extends Component {

  static propTypes = {
    stockCode: PropTypes.string.isRequired,
  };
  
  constructor(props) {
    super(props);
    let id = ( '_' + Math.random()).replace('.','_');
    this.state = {
        chartId : 'SunburstChart',
        layer: 0,
        value: '当前期',
        text:'该部分呈现市场上与该公司静态相似的其余公司。越靠近中心处则相似度越高；点击各公司部分以观测相似度最高的部分'
    }
  }

  componentDidMount() {
    this.getData();
  }

  GetUrlParam(paraName) {
  　var url = document.location.toString();
  　var arrObj = url.split("?");
  　　　if (arrObj.length > 1) {
  　　　　　var arrPara = arrObj[1].split("&");
  　　　　　var arr;
  　　　　　for (var i = 0; i < arrPara.length; i++) {
  　　　　　　　arr = arrPara[i].split("=");
  　　　　　　　if (arr != null && arr[0] == paraName) {
  　　　　　　　　　return arr[1];
  　　　　　　　}
  　　　　　}
  　　　　　return "";
  　　　}
  　　　else { return ""; }
  }

  getData() {
    this.props.updateBindingData('ChartData',{
      'params': {
        secu_code: this.GetUrlParam("machineCode"),
        type:'static',
        tab:this.state.value
      }
    }, (data) => {
      // console.log("data",data)
      this.setState({
        status: data.status
      })
      if(data.status !== 'NOT_PRIVILEGED'){
        this.initChart(generateSunburstChartOption(
          '静态相似公司',
          data.data.numbers,
          data.data.layer 
        ));
      }
    });
  }

  initChart(config) {
    // console.log("myChart",document.getElementById(this.state.chartId))
    let myChart = echarts.getInstanceByDom(document.getElementById(this.state.chartId));
    if( myChart === undefined){
        // console.log("getElementById",document.getElementById(this.state.chartId))
        myChart = echarts.init(document.getElementById(this.state.chartId));
    }
    myChart.setOption(config);
    window.onresize =()=>{
      myChart.resize();
    }
  }

  onChange(value) {
    this.setState({
      value
    }, 
    this.getData
    );
  }

  render() {
    const { ChartData } = this.props.bindingData;   
    const dataSource = ['当前期', '一年','两年','三年']

    return (
      <div className="chart-container">
        <IceContainer>
          <Loading 
            style={{width: "100%"}}
            visible={ChartData.__loading ? true : false}
            shape="fusion-reactor"
          >
          {/* <PermissionControl status={this.state.status} chart={chart}/> */}
          {/* {this.state.status != 'NOT_PRIVILEGED' ? [ */}
            <Select
              style={{position:'absolute',left:'10px',top:'0px',zIndex:'2'}}
              value={this.state.value}
              dataSource={dataSource}
              onChange={this.onChange.bind(this)}
            />
            <div id={this.state.chartId} style={{width: "100%", height: "680px"}}></div>
           {/* ]
          : */}
            {/* <div style={{width: "100%", height:"400px",textAlign:'center',lineHeight:"400px",background:"#eee"}}>没有权限查看此数据</div> */}
          {/* } */}
            <div>
              <div style={{fontSize:'18px',fontWeight:'bold',marginBottom:'10px'}}>指标解释</div>
              <div dangerouslySetInnerHTML={{ __html: this.state.text }} className="tab-text"></div>
            </div>
          </Loading>
        </IceContainer>
        {/* <IceContainer>
          <div style={{fontSize:'18px',fontWeight:'bold',marginLeft:'10px'}}>指标解释</div>
          <div dangerouslySetInnerHTML={{ __html: this.state.text }} className="tab-text" />
        </IceContainer> */}
      </div>
    )
  }
}
